<template>
    <div class="recharge bg-white-pk font-size-14-pk text-black-pk">
        <van-nav-bar
                :border="false"
                title="余额充值"
                right-text="充值明细"
                left-arrow
                @click-right="rightBtn"
                @click-left="toBack">
        </van-nav-bar>
       <div class="page-pad-pk list-item-pad-pk">
           <div class="rechargeHead light-border-bottom-pk">
               <div>充值金额</div>
               <div class="gain d-flex-pk">
                   <div class="moneyIcon">￥</div>
                   <div class="">
                       <van-field placeholder="请输入充值金额"></van-field>
                   </div>
               </div>
           </div>
           <div class="d-flex-pk rechargeWay light-border-bottom-gray">
               <div class="itemLeft">
                   <img src="../../assets/images/alipayIcon.png" alt="img"/>
               </div>
               <div class="flex-grow-1">支付宝支付</div>
               <div class="">
                   <van-icon name="success" color="#D82D11" />
               </div>
           </div>
           <div class="d-flex-pk rechargeWay light-border-bottom-gray">
               <div class="itemLeft">
                   <img src="../../assets/images/wechatpay.png" alt="img"/>
               </div>
               <div>微信支付</div>
           </div>
       </div>
    </div>
</template>
<script>
    export default {
        name:"recharge",
        data(){
            return{

            }
        },
        beforeRouteEnter(to, from, next) {
            let prePath = "";
            //待优化，将参数带上
            if(from.path === "/login" || from.path === "/register" || from.path === "/" || from.path === "/wxLogin" ) {
                prePath = "/index"
            }else {
                //涉及到需要保存上一页数据的，可以拼接到地址
                prePath = from.fullPath
            }
            next( vm => {
                vm.$store.commit("setPrePath", prePath)
            })
        },
        created() {
        },
        methods:{
            toBack(){
              this.$router.push({
                  name:"remainMoney"
              })
            },
            rightBtn(){
                this.$router.push({
                    name:"rechargeList"
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
    .recharge{
        line-height: 1.8;
        .rechargeHead{
            padding: 10px 0;
            .gain{
                align-items: center;
                .moneyIcon{
                    font-size: 24px;
                }
            }
        }
        .rechargeWay{
            align-items: center;
            border-bottom: 1px solid #EDEDED;
            .itemLeft{
                padding-right: 10px;
                img{
                    width: 40px;
                    height: 40px;
                }
            }
        }
    }
</style>
